<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <div class="demo-userComp-ztree-ztreeDemo">


        <div style="margin-bottom: 10px;">
            <div style="float:left;width: 500px;overflow: auto;border: 1px solid #eee;">
                <ztree-vue
                    :nodeIdKey="ztreeSetting.nodeIdKey"
                    :nodePidKey="ztreeSetting.nodePidKey"
                    :isSimpleData="ztreeSetting.isSimpleData"
                    :checkable="ztreeSetting.checkable"
                    :checkableSetting="ztreeSetting.checkableSetting"
                    :isShowLine="ztreeSetting.isShowLine"
                    :isShowIcon="ztreeSetting.isShowIcon"
                    :isOutlookStyle="ztreeSetting.isOutlookStyle"
                    :nodeHtmlKey="ztreeSetting.nodeHtmlKey"
                    :isDragable="ztreeSetting.isDragable"
                    :ztreeData="ztreeData"
                    :showRemoveBtn="ztreeSetting.showRemoveBtn"
                    :showRenameBtn="ztreeSetting.showRenameBtn"
                    :showAddBtn="ztreeSetting.showAddBtn"

                    @ztree-inited="ztreeInitOk"
                    @on-click="ztreeEventAction"
                    @on-right-click="ztreeEventAction"
                    @on-collapse="ztreeEventAction"
                    @on-expand="ztreeEventAction"
                    @on-check="ztreeEventAction"
                    @on-drop="ztreeEventAction"
                    @on-rename="ztreeEventAction"
                    @on-remove="ztreeEventAction"
                    @on-node-created="ztreeEventAction"
                    @edit-node="ztreeEventAction"
                    @add-node="ztreeEventAction"
                    @del-node="delNodeAction"
                ></ztree-vue>
            </div>
            <div style="margin-left: 520px;">
                <Button type="primary" @click="showCodeAction">显示代码</Button>
            </div>
            <div style="clear: both"></div>
        </div>

        <div>
            <!-- 显示HTML代码 -->
            <pre v-show="isShowCode">
                <code class="html" v-text="htmlCode">
                </code>
            </pre>
                <!-- 显示JavaScript代码 -->
            <pre v-show="isShowCode">
                <code class="javascript"  v-text="jsCode">
                </code>
            </pre>
        </div>


        <!-- 文档说明 -->
        <div class="api">
            <div class="anchor">
                <h2 >事件 API</h2>
            </div>
            <div class="anchor">
                <h3>event说明</h3>
            </div>
            <table>
                <thead>
                <tr>
                    <th>事件名称</th>
                    <th>说明</th>
                    <th>参数</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>ztree-inited</td>
                    <td>初始完成执行的回调函数</td>
                    <td>
                        返回一个对象Object,包含
                        <pre>
{
    "zlstZtreeObj": this.zlstZtreeObj, // vueZtree对象，我们自己封装的方法
    "zTreeObj": this.ztreeObj // ztree对象
}
                      </pre>
                    </td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>on-click</td>
                    <td>点击树形节点触发的事件</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>on-right-click</td>
                    <td>鼠标右键点击树形节点触发的事件</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>on-collapse</td>
                    <td>折叠节点触发的事件</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>on-expand</td>
                    <td>展开节点触发的事件</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>on-check</td>
                    <td>选中checkbox节点触发的事件</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>on-drop</td>
                    <td>拖拽节点释放触发的事件</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>on-rename</td>
                    <td>节点重命名触发的事件</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>on-remove</td>
                    <td>删除节点触发的事件</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>on-node-created</td>
                    <td>创建节点触发的事件</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>edit-node</td>
                    <td>编辑节点触发的事件</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>add-node</td>
                    <td>添加节点触发的事件</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>del-node</td>
                    <td>删除节点触发的事件</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>


                </tbody>
            </table>

        </div>

        <div class="api">
            <div class="anchor">
                <h2 >props </h2>
            </div>
            <div class="anchor">
                <h3>属性说明</h3>
            </div>
            <table>
                <thead>
                <tr>
                    <th>属性值</th>
                    <th>说明</th>
                    <th>参数</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>nodeIdKey</td>
                    <td>节点的ID</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>nodePidKey</td>
                    <td>父节点的ID</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>nodeHtmlKey</td>
                    <td>节点显示的内容对应的key</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>isSimpleData</td>
                    <td>数据是否是simple格式（数组，指明了父节点ID 和 当前节点的ID）</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>checkable</td>
                    <td style="color:red">
                        是否显示checkbox<br/>
                        // 是否是Outlook 风格，如果是 outlook风格，则默认就不是checkbox<br/>
                        isOutlookStyle: false,<br/>
                    </td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>checkableSetting</td>
                    <td >
                        配置checkbox或者radio的逻辑<br/>
                        <div style="color: red;">checkable:true 并且 isOutlookStyle: false</div>
                    </td>
                    <td>
                        <pre>
                            <code class="javascript"  >

    checkableSetting: {
        enable: false,
        // 设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数,默认是false
        autoCheckTrigger: false,
        // 勾选 checkbox 对于父子节点的关联关系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]
        // 默认值：{ "Y": "ps", "N": "ps" }
        //JSON 格式说明
        // Y 属性定义 checkbox 被勾选后的情况；
        // N 属性定义 checkbox 取消勾选后的情况；
        // "p" 表示操作会影响父级节点；
        // "s" 表示操作会影响子级节点。
        chkboxType: { "Y": "ps", "N": "ps" },
//                        勾选框类型(checkbox 或 radio）[setting.check.enable = true 时生效]
        chkStyle:"checkbox",
        //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
//                        1、只使用于初始化节点时，便于批量操作。 对于已存在的节点请利用 updateNode 方法单个节点设置
        // true 表示 新加入子节点时，自动继承父节点 nocheck = true 的属性。
        // false 表示 新加入子节点时，不继承父节点 nocheck 的属性。
        nocheckInherit: false,
        // 当父节点设置 chkDisabled = true 时，设置子节点是否自动继承 chkDisabled = true 。[setting.check.enable = true 时生效]
        //1、只使用于初始化节点时，便于批量操作。 对于已存在的节点请利用 setChkDisabled 方法单个节点设置。
        //true 表示 新加入子节点时，自动继承父节点 chkDisabled = true 的属性。
        //false 表示 新加入子节点时，不继承父节点 chkDisabled 的属性。
        chkDisabledInherit: false,
        //  radio 的分组范围。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 时生效]
        //  radioType = "level" 时，在每一级节点范围内当做一个分组。
        //radioType = "all" 时，在整棵树范围内当做一个分组。
        radioType: "all"
    }
                     </code>   </pre>

                    </td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>isShowLine</td>
                    <td>节点是否显示线连接</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>isShowIcon</td>
                    <td>节点前是否显示icon图标</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>isOutlookStyle</td>
                    <td>是否是outlook主题样式</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>isDragable</td>
                    <td>是否可拖拽</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>ztreeData</td>
                    <td>ztree的数据（数组格式）</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>showRemoveBtn</td>
                    <td>是否显示移除节点的按钮</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>showRenameBtn</td>
                    <td>是否显示重命名节点的按钮</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                <tr>
                    <td>showAddBtn</td>
                    <td>是否显示添加节点的按钮</td>
                    <td></td>
                    <td>
                        无
                    </td>
                </tr>

                </tbody>
            </table>

        </div>

    </div>
</template>

<script>
    import hljs from 'highlight.js'
    import {ztreeServerData} from "./ztreeData.js"

    var ztreeData = ztreeServerData.data;

    // 用来缓存ztree 对象
    var zlstZtreeObj;

    export default {
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-userComp-ztree-ztreeDemo pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 100);
        },
        data: function () {
            return {
                // 是否显示代码
                isShowCode: false,
                ztreeData: ztreeData,
                componentName: "<ztree-vue>",
                ztreeSetting: {
                    nodeIdKey: "id",
                    nodePidKey: "parentId",
                    isSimpleData: true,
                    // 是否显示 多选框
                    checkable: true,
                    checkableSetting: {
                        chkStyle:"radio",
                    },
                    isShowIcon: false,
                    selectedMulti: false,
                    // 是否是Outlook 风格，如果是 outlook风格，则默认就不是checkbox
                    isOutlookStyle: false,
                    nodeHtmlKey: "deptName",
                    //点击展开按钮
                    dblClickExpand: false,
                    // 是否可拖拽
                    isDragable: false,
                    // 显示删除按钮
                    showRemoveBtn: true,
                    // 显示重命名按钮
                    showRenameBtn: true,
                    // 显示添加按钮
                    showAddBtn: true,

                },
                htmlCode: ' <ztree-vue\n' +
                '      :nodeIdKey="ztreeSetting.nodeIdKey"\n' +
                '      :nodePidKey="ztreeSetting.nodePidKey"\n' +
                '      :isSimpleData="ztreeSetting.isSimpleData"\n' +
                '      :checkable="ztreeSetting.checkable"\n' +
                '      :isShowLine="ztreeSetting.isShowLine"\n' +
                '      :isShowIcon="ztreeSetting.isShowIcon"\n' +
                '      :isOutlookStyle="ztreeSetting.isOutlookStyle"\n' +
                '      :nodeHtmlKey="ztreeSetting.nodeHtmlKey"\n' +
                '      :isDragable="ztreeSetting.isDragable"\n' +
                '      :ztreeData="ztreeData"\n' +
                '      :showRemoveBtn="ztreeSetting.showRemoveBtn"\n' +
                '      :showRenameBtn="ztreeSetting.showRenameBtn"\n' +
                '      :showAddBtn="ztreeSetting.showAddBtn"\n' +
                '\n' +
                '  @ztree-inited="ztreeInitOk"\n' +
                '  @on-click="ztreeEventAction"\n' +
                '  @on-right-click="ztreeEventAction"\n' +
                '  @on-collapse="ztreeEventAction"\n' +
                '  @on-expand="ztreeEventAction"\n' +
                '  @on-check="ztreeEventAction"\n' +
                '  @on-drop="ztreeEventAction"\n' +
                '  @on-rename="ztreeEventAction"\n' +
                '  @on-remove="ztreeEventAction"\n' +
                '  @on-node-created="ztreeEventAction"\n' +
                '  @edit-node="ztreeEventAction"\n' +
                '  @add-node="ztreeEventAction"\n' +
                '  @del-node="delNodeAction"\n' +
                '></ztree-vue>',
                jsCode:'export default {\n' +
                '    mounted: function () {\n' +
                '    },\n' +
                '    data: function () {\n' +
                '        return {\n' +
                '            "ztreeData": ztreeData,\n' +
                '            "ztreeSetting": {\n' +
                '                nodeIdKey: "id",\n' +
                '                nodePidKey: "parentId",\n' +
                '                isSimpleData: true,\n' +
                '                // 是否显示 多选框\n' +
                '                checkable: true,\n' +
                '                isShowLine: false,\n' +
                '                isShowIcon: false,\n' +
                '                selectedMulti: false,\n' +
                '                // 是否是Outlook 风格，如果是 outlook风格，则默认就不是checkbox\n' +
                '                isOutlookStyle: true,\n' +
                '                nodeHtmlKey: "deptName",\n' +
                '                //点击展开按钮\n' +
                '                dblClickExpand: false,\n' +
                '                // 是否可拖拽\n' +
                '                isDragable: false,\n' +
                '                // 显示删除按钮\n' +
                '                showRemoveBtn: true,\n' +
                '                // 显示重命名按钮\n' +
                '                showRenameBtn: true,\n' +
                '                // 显示添加按钮\n' +
                '                showAddBtn: true,\n' +
                '\n' +
                '            },\n' +
                '        };\n' +
                '    },\n' +
                '    methods: {\n' +
                '        ztreeInitOk: function (zTreeObj) {\n' +
                '//        console.dir(zTreeObj)\n' +
                '            zlstZtreeObj = zTreeObj.zlstZtreeObj;\n' +
                '        },\n' +
                '    },\n' +
                '}',
            };
        },
        methods: {
            // 显示代码
            showCodeAction: function (){
                this.isShowCode = !this.isShowCode;
            },
            ztreeInitOk: function (zTreeObj) {
//        alert("ztreeInitOk");
//        console.dir(zTreeObj)
                zlstZtreeObj = zTreeObj.zlstZtreeObj;
            },
            ztreeEventAction: function () {
//        console.dir(arguments);
            },
            delNodeAction: function () {
                console.dir(arguments);
            },

            testAction: function () {
                // 展开全部节点
//        zlstZtreeObj.expandAll();
//        zlstZtreeObj.collapseAll();

//        获取所有节点
//          var allNodes = zlstZtreeObj.getAllNodes();
//          console.dir(allNodes);

                //       根据节点的属性查找节点
//          var findNodes = zlstZtreeObj.findNodesByParam("name","叶子节点112");
//          console.dir(findNodes);

//        根据tid 查找节点
//          var nodeObj = zlstZtreeObj.findNodeByTid("treeDemo_4");
//          console.dir(nodeObj);

                //        获取所有选中的节点
//          var nodes = zlstZtreeObj.getSelectedNodes();
//          console.dir(nodes);

                //        获取所有节点
//        var nodeObj = zlstZtreeObj.findNodeByTid("treeDemo_4");
//        zlstZtreeObj.hideNodeByNode(nodeObj);

                //        获取所有节点
//        var findNodes = zlstZtreeObj.findNodesByParam("name","父节点11 - 折叠");
//        console.dir(findNodes);
//        zlstZtreeObj.expandNodeAll(findNodes[0]);
//        zlstZtreeObj.expandNodeOnly(findNodes[0]);
//        zlstZtreeObj.collapseAll(findNodes[0]);
//        zlstZtreeObj.collapseNodeOnly(findNodes[0]);

//        var findNodes = zlstZtreeObj.findNodesByParam("name", "父节点11 - 折叠");
//        zlstZtreeObj.locationNode(findNodes[0]);
            }
        },
    }
</script>

<style lang="scss" scoped>
    /***
   scoped ： 表示当前写的样式是针对当前页面的，对其他页面没有影响
   lang="scss": 表示我写的样式代码是针对SASS的，不是less等。强调，属性的值是scss
   ***/
    .demo-userComp-ztree-ztreeDemo {
        .api table {
            font-family: Consolas, Menlo, Courier, monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

        .api table td, .api table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }

        .api table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
    }
</style>
